import Toast from '../../../miniprogram_npm/@vant/weapp/toast/toast.js';
Page({
  data: {
    imgUrl: 'https://gitee.com/zhang-zhaoming/imgs/raw/master/yidashop/',
    isShowTag: false,
    active: 0,
    height: 0, //页面高度 rpx
    ratio: 0, //rpx,px转化比
    yId: 1, //y轴滚动位置
    heightArray: [],
    list: [{
        id: 1,
        title: "前端",
        photo: [
          "https://www.tpxhm.com/static/tpl/index/foundation/images/bgtx.jpg",
          "https://www.tpxhm.com/static/tpl/index/foundation/images/bgtx.jpg",
          "https://www.tpxhm.com/static/tpl/index/foundation/images/bgtx.jpg",
          "https://www.tpxhm.com/static/tpl/index/foundation/images/bgtx.jpg",
          "https://www.tpxhm.com/static/tpl/index/foundation/images/bgtx.jpg",
          "https://www.tpxhm.com/static/tpl/index/foundation/images/bgtx.jpg",
          "https://www.tpxhm.com/static/tpl/index/foundation/images/bgtx.jpg"
        ],
      },
      {
        id: 2,
        title: "后端",
        photo: [
          "https://www.tpxhm.com/static/uploads/note/20190103/7c754f8e3362d0fa5a4f6be71818b35e.jpg",
          "https://www.tpxhm.com/static/uploads/note/20190103/7c754f8e3362d0fa5a4f6be71818b35e.jpg",
          "https://www.tpxhm.com/static/uploads/note/20190103/7c754f8e3362d0fa5a4f6be71818b35e.jpg",
          "https://www.tpxhm.com/static/uploads/note/20190103/7c754f8e3362d0fa5a4f6be71818b35e.jpg",
          "https://www.tpxhm.com/static/uploads/note/20190103/7c754f8e3362d0fa5a4f6be71818b35e.jpg",
          "https://www.tpxhm.com/static/tpl/index/foundation/images/bgtx.jpg",
          "https://www.tpxhm.com/static/tpl/index/foundation/images/bgtx.jpg"
        ],
      },
      {
        id: 3,
        title: "小程序",
        photo: [
          "https://www.tpxhm.com/static/uploads/note/20190103/7c754f8e3362d0fa5a4f6be71818b35e.jpg",
          "https://www.tpxhm.com/static/uploads/note/20190103/7c754f8e3362d0fa5a4f6be71818b35e.jpg",
          "https://www.tpxhm.com/static/uploads/note/20190103/7c754f8e3362d0fa5a4f6be71818b35e.jpg",
          "https://www.tpxhm.com/static/uploads/note/20190103/7c754f8e3362d0fa5a4f6be71818b35e.jpg",
          "https://www.tpxhm.com/static/uploads/note/20190103/7c754f8e3362d0fa5a4f6be71818b35e.jpg",
          "https://www.tpxhm.com/static/uploads/note/20190103/7c754f8e3362d0fa5a4f6be71818b35e.jpg",
          "https://www.tpxhm.com/static/uploads/note/20190103/7c754f8e3362d0fa5a4f6be71818b35e.jpg",
          "https://www.tpxhm.com/static/tpl/index/foundation/images/bgtx.jpg"
        ],
      },
      {
        id: 4,
        title: "",
        photo: [
          "https://www.tpxhm.com/static/tpl/index/foundation/images/bgtx.jpg",
          "https://www.tpxhm.com/static/tpl/index/foundation/images/bgtx.jpg",
          "https://www.tpxhm.com/static/tpl/index/foundation/images/bgtx.jpg",
          "https://www.tpxhm.com/static/uploads/note/20190103/7c754f8e3362d0fa5a4f6be71818b35e.jpg",
          "https://www.tpxhm.com/static/uploads/note/20190103/7c754f8e3362d0fa5a4f6be71818b35e.jpg",
          "https://www.tpxhm.com/static/uploads/note/20190103/7c754f8e3362d0fa5a4f6be71818b35e.jpg",
          "https://www.tpxhm.com/static/uploads/note/20190103/7c754f8e3362d0fa5a4f6be71818b35e.jpg",
          "https://www.tpxhm.com/static/tpl/index/foundation/images/bgtx.jpg",
        ],
      }
    ]
  },

  // 切换tab
  onChange(e) {
    console.log(e.detail.index)
    let that = this
    if (e.detail.index == 0) {
      that.setData({
        yId: 2,
        active: 0
      })
    } else if (e.detail.index == 1) {
      that.setData({
        yId: 3,
        active: 1
      })
    } else if (e.detail.index == 2) {
      that.setData({
        yId: 4,
        active: 2
      })
    }
    // that.setData({
    //   yId: e.detail.index
    // })
  },

  onLoad: function (options) {
    let that = this
    wx.setNavigationBarTitle({
      title: '商品详情页'
    })
    //1. 获取页面高度
    wx.getSystemInfo({
      success: function (res) {
        let width = res.windowWidth
        let ratio = 750 / width
        let height = ratio * res.windowHeight
        console.log(height)
        that.setData({
          height: height, //单位rpx
          ratio: ratio
        })
      }
    })
  },

  onShow: function () {
    let that = this,
      heightArray = [];
    //1.获取滚动元素距离顶部位置-y
    setTimeout(function () {
      let query = wx.createSelectorQuery() //创建节点查询器
      query.selectAll('.column').boundingClientRect(function (rect) { // 获得节点到顶部的距离（高度）
        rect.forEach(function (value) {
          // heightArray.push((value.top - (170 / that.data.ratio)))
          heightArray.push(value.top + 50)
        })
        that.setData({
          heightArray
        })
      }).exec()
    }, 1000) //此处最好用延时，否则获取的结果有可能是null，也有可能值不准确。 
  },

  //监听滚动 切换tab
  scrollFloor: function (e) {
    var that = this
    var scrollTop = e.detail.scrollTop //滚动条距离顶部
    var heightArray = that.data.heightArray //滚动项距离顶部
    var id = null
    //计算比较得出下标
    for (let i = 0; i <= heightArray.length; i++) {
      if (scrollTop >= heightArray[i] - 90 && scrollTop < heightArray[i + 1]) {
        id = that.data.list[i].id
      }
    }
    if (id != null) {
      if (id == 1) {
        that.setData({
          isShowTag: false,
          active: -1
        })
      } else if (id == 2) {
        that.setData({
          active: 0,
          isShowTag: true
        })
      } else if (id == 3) {
        that.setData({
          active: 1,
          isShowTag: true
        })
      } else {
        that.setData({
          active: 2,
          isShowTag: true
        })
      }
    }
  },
})